import { Component } from 'react'
import React from 'react'
// import Shengluehao from './shengluehao/index'
// import MarkDwon from './markdown/idnex'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
import 'antd/dist/antd.css'
// react动画组件
// import TransitionGroup from './transitionGroup'
// import Index from './refs/index'
// import Canvas from './canvas/index'

import LoadIcon from './loadingIcon/index'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      str: ''
    }
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        str: '1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111'
      })
    }, 5000);
  }

  render() {
    console.log(1);
    return (
      <div style={{ background: 'black' }}>
        {/* <MarkDwon/> */}
        {/* <Index/> */}
        {/* <Canvas 
             str={this.state.str} 
          /> */}
        {/* 可传入类名 */}
        {/* 
          可传入类名，初始化方式，以及每种初始方式的具体参数
          
          init为初始化参数:
              SpritFrame：使用精灵图作为背景图，实现原理为定时器，对应的参数为SpritFrame,（需要事先设定背景图片）
                      SpritFrame中的参数：EachFrameWidth：每一帧的宽度、FrameCount：一共多少帧、FrameAlltime：一次循环多长时间

              singleFrame：使用序列帧做动图，内部检测是否支持C3动画，支持则使用C3动画，否则使用定时器做切换
                           需要通过传入的类名，事先定义好C3动画

        */}
        <LoadIcon
          IconclassName={'nihao'}
          init={{
            way:'SpritFrame',
            SpritFrame:{
              EachFrameWidth: 180,
              FrameCount:22,
              FrameAlltime:900
            }
          }}
          
        />
      </div>
    );
  }
}

export default App;
